import React, { memo,PureComponent } from 'react';
import { Row, Col, Card, Tabs, DatePicker,Select } from 'antd';
import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
import numeral from 'numeral';
import styles from './Analysis.less';
import PoliceStaticBar from './PoliceStaticBar';
const { RangePicker } = DatePicker;
const { TabPane } = Tabs;
const { Option } = Select;

class PoliceStaticCard extends PureComponent{
	constructor(props) {
	    super(props);
	    this.state = {
          policeCG: [
            { label: '总警监', 申报: 50, 审核: 40, 审批: 30},
            { label: '副总警监', 申报: 60, 审核: 50, 审批: 40},
            { label: '一级警监', 申报: 80, 审核: 70, 审批: 60},
            { label: '二级警监', 申报: 100, 审核: 80, 审批: 60},
            { label: '三级警监', 申报: 120, 审核: 100, 审批: 90},
            { label: '一级警督', 申报: 150, 审核: 130, 审批: 110},
            { label: '二级警督', 申报: 170, 审核: 150, 审批: 130},
            { label: '三级警督', 申报: 180, 审核: 160, 审批: 150},
            { label: '一级警司', 申报: 200, 审核: 190, 审批: 180},
            { label: '二级警司', 申报: 220, 审核: 200, 审批: 180},
            { label: '三级警司', 申报: 230, 审核: 210, 审批: 200},
            { label: '一级警员', 申报: 260, 审核: 240, 审批: 230},
            { label: '二级警员', 申报: 300, 审核: 290, 审批: 280},
          ],
          policeZY: [
            { label: '专业技术总警监', 申报: 60, 审核: 50, 审批: 40},
            { label: '专业技术副总警监', 申报: 70, 审核: 60, 审批: 50},
            { label: '专业技术一级警监', 申报: 80, 审核: 70, 审批: 60},
            { label: '专业技术二级警监', 申报: 90, 审核: 80, 审批: 70},
            { label: '专业技术三级警监', 申报: 110, 审核: 100, 审批: 90},
            { label: '专业技术一级警督', 申报: 160, 审核: 150, 审批: 140},
            { label: '专业技术二级警督', 申报: 180, 审核: 170, 审批: 160},
            { label: '专业技术三级警督', 申报: 200, 审核: 180, 审批: 170},
            { label: '专业技术一级警司', 申报: 220, 审核: 200, 审批: 190},
            { label: '专业技术二级警司', 申报: 240, 审核: 230, 审批: 220},
            { label: '专业技术三级警司', 申报: 280, 审核: 270, 审批: 260},
            { label: '专业技术一级警员', 申报: 340, 审核: 320, 审批: 310},
            { label: '专业技术二级警员', 申报: 380, 审核: 360, 审批: 350},
          ],
          policeType: "police_cg"
	    }
	}


  //警衔类型切换查询
  handleSearchPolice = e => {
  	this.setState({
  		policeType: e
  	})
  };




  render() {
    const {
      rangePickerValue,
      isActive,
      handleRangePickerChange,
      loading,
      selectDate,
      handleOpenChangePoliceNum,
      handlePanelChangePoliceNum,
      clearValuePoliceNum,policeNumTime,
      isopenPliceNum,
    } = this.props;

    const { policeCG,policeZY,policeType } = this.state;

    let policeBarData;
    if (policeType === 'police_cg') {
      policeBarData = policeCG;
    } else if(policeType === "police_zy"){
      policeBarData = policeZY;
    }

    return (
     <Card loading={loading} bordered={false} bodyStyle={{ padding: 0 }}>
       <div className={styles.salesCard}>
         <Tabs
           tabBarExtraContent={
             <div className={styles.salesExtraWrap}>
               <div className={styles.salesExtra}>
                 {/*<a className={isActive('month')} onClick={() => selectDate('month')}>
                   <FormattedMessage id="app.analysis.all-month" defaultMessage="All Month" />
                 </a>*/}
                 <a className={isActive('year')} onClick={() => selectDate('year')}>
                   <FormattedMessage id="app.analysis.all-year" defaultMessage="All Year" />
                 </a>
               </div>
               <DatePicker
                 value={policeNumTime}
                 open={isopenPliceNum}
                 mode="year"
                 format="YYYY"
                 style={{ width: 256 }}
                 onOpenChange={handleOpenChangePoliceNum}
                 onPanelChange={handlePanelChangePoliceNum}
                 onChange={clearValuePoliceNum}
               />
                      <Select
                      showSearch
                      style={{minWidth: '120px',marginLeft: '15px'}}
                      defaultValue="police_cg"
                      placeholder="请选择"
                      onChange={this.handleSearchPolice}
                      filterOption={(input, option) =>
                        option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                      }
                      >
                		      <Option value="police_cg">行政警衔</Option>
                		      <Option value="police_zy">技术警衔</Option>
                	    </Select>
             </div>
           }
           size="large"
           tabBarStyle={{ marginBottom: 20 }}
         >
           <TabPane
             tab={<FormattedMessage id="app.policestaticanalysis.policenum" defaultMessage="Sales" />}
             key="sales"
           >
             <Row>
               <Col xl={24} lg={24} md={24} sm={24} xs={24}>
                 <div className={styles.salesBar}>
                   <PoliceStaticBar
                     height={300}
                     data={policeBarData}
                     title={
                       <FormattedMessage
                         id="app.policestaticanalysis.policeperson"
                         defaultMessage="Sales Trend"
                       />
                     }
                   />
                 </div>
               </Col>
             </Row>
           </TabPane>
         </Tabs>
       </div>
     </Card>
    )
  }

}

export default PoliceStaticCard;
